<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 大哥最牛逼
  Date: 2019/11/1
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--导入buding.css--%>
    <link rel="stylesheet" type="text/css" href="<c:url value='/res/css/buding.css'/> "/>
    <%--导入layui.js--%>
    <script type="text/javascript" src="<c:url value='/res/tool/layui/layui.js'/>"></script>
    <%--导入layui.css--%>
    <link rel="stylesheet" type="text/css" href="<c:url value='/res/tool/layui/css/layui.css'/> "/>
    <%--导入jquery--%>
    <script type="text/javascript" src="<c:url value='/res/js/jquery-3.4.1.js'/> "></script>
    <%--导入vue--%>
    <script type="text/javascript" src="<c:url value='/res/js/vue.min.js'/> "></script>
    <%--导入axios--%>
    <script type="text/javascript" src="<c:url value='/res/js/axios.min.js'/> "></script>
</head>
<body>
    <div id="app">
        <div id="top">
            <span class="layui-breadcrumb">
              <a href="">房屋租赁管理</a>
              <a href="">房屋信息管理</a>
              <a href=""><cite>楼栋信息管理</cite></a>
            </span>
        </div>

        <h2 style="margin-left: 30px;margin-top: 10px;font-weight: bold">楼栋信息管理</h2>

        <div id="blist">
            <div id="newbuding" @click="addBuding">
                +新增楼栋
            </div>
<%--            <c:forEach var="buding" items="${budings}">--%>
                <div class="buding" v-for="buding in budings">
                    <div class="b_up">
                        <div class="up_1">
                            <img width="90px" height="90px"  :src="path+buding.img"/>
                        </div>
                        <div class="up_2">
                            <h3 style="font-weight: bold">{{buding.name}}</h3>
                            <p style="font-size: 13px;margin-top: 20px;color: #9d9d9d;">{{buding.location}}</p>
                            <p style="font-size: 13px;margin-top:5px;color: #9d9d9d;">总共{{buding.rows}}层&emsp;面积{{buding.mianji}}平方米</p>
                        </div>
                    </div>
                    <div class="b_down">
                        <div class="b_caozuo"><a href="" @click.prevent="budinginfo(buding.id)">楼栋信息</a></div>
                        <div class="b_caozuo2"><a href="" @click.prevent="roominfo(buding.id)">房间/店面信息</a></div>
                    </div>
                </div>
<%--            </c:forEach>--%>
        </div>
        <div id="page" style="margin-left: 350px"></div>

        <div id="postBuding"  hidden="hidden">
            <form action="" method="post" class="layui-form">
                <input v-if="idFlag" v-model="bitem.id" type="hidden" name="id"/>
                <div class="layui-form-item" style="margin-top: 10px">
                    <label class="layui-form-label">楼栋名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" v-model="bitem.name" required  lay-verify="required" placeholder="请输入楼栋名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">楼栋地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="location" v-model="bitem.location" required  lay-verify="required" placeholder="请输入楼栋地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">楼栋层数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="rows" required v-model="bitem.rows"  lay-verify="required|number" placeholder="请输入楼栋层数" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">楼栋面积</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="mianji" required v-model="bitem.mianji"  lay-verify="required|number" placeholder="请输入楼栋面积" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <%--图片表单项--%>
                <input type="text" name="img" v-model="bitem.img" hidden="hidden"/>
                <%--上传图片按钮--%>
                <button v-show="upflag" type="button" accept="images" class="layui-btn" id="tupload" style="margin-left: 40px">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <%--图片缩略图--%>
                <img v-if="flag" width="60px" height="60px" :src="path+bitem.img"/>
                <div class="layui-form-item" style="margin-top: 10px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">{{submit}}</button>
                        <button type="reset" class="layui-btn layui-btn-primary" v-if="resetFlag">重置</button>
                        <button class="layui-btn layui-btn-danger" lay-submit lay-filter="del" v-show="delFlag">删除楼栋</button>
                    </div>
                </div>
            </form>
        </div>

    </div>

</body>
<script type="text/javascript">
    layui.use(['element','laypage','layer','form','upload'],function () {
        var element=layui.element;
        var laypage=layui.laypage;
        var layer=layui.layer;
        var form=layui.form;
        var upload=layui.upload;
        //监听添加和修改楼栋信息
        form.on('submit(formDemo)',function (data) {
            var json=data.field;
            if(vue.bitem.id!=""){//id不为空，是修改信息操作
                var _layer=layer;
                axios.post('updateBuding',json)
                    .then(function (value) {
                        if(value.data){
                            _layer.alert("修改成功");
                            _layer.closeAll();
                            location.reload();
                        }
                    }).catch(function (reason) {
                        layer.alert("修改失败");
                        console.log(reason);
                })
                return false;
            }
            if(vue._url==undefined){
               layer.alert("文件还未上传成功");
            }
            else{
                json.img=vue._url;
                var _layer=layer;
                axios.post("addBuding",json)
                    .then(function (value) {
                        if(value.data){
                            _layer.alert("添加成功");
                            _layer.closeAll();
                            location.reload();
                        }
                    }).catch(function (reason) {
                        alert("添加失败")
                        console.log(reason);
                })
            }
            return false;
        });
        //监听删除楼栋信息
        form.on('submit(del)',function (data) {
            var json=data.field;
            axios.post('delBuding',json)
                .then(function (value) {
                    if(value.data){
                        layer.closeAll();
                        location.reload();
                    }
                }).catch(function (reason) {
                    layer.alert("删除失败");
                    console.log(reason);
            });
            return false;
        });

        var vue=new Vue({
            el: "#app",
            data: {
                budings: "",
                bitem:{
                    id:"",
                    name:"",
                    location:"",
                    rows:"",
                    mianji:""
                },
                path: "<%=request.getContextPath()%>",
                _url:"",
                url: "",
                flag: false,//缩略图显示
                upflag:false,
                resetFlag:true,
                delFlag:false,
                idFlag:false,
                submit:"立即提交"
            },
            methods: {
                addBuding: function () {
                    this.bitem={
                        id:"",
                        name:"",
                        location:"",
                        rows:"",
                        mianji:"",
                        img:""
                    },
                    this.idFlag=false;
                    this.delFlag=false;
                    this.upflag=true;
                    this.flag=false;
                    this.resetFlag=true;
                    this.submit="立即提交";
                    var _this = this;
                    layer.open({
                        type: 1,
                        title: "添加楼栋",
                        content: $('#postBuding')
                    });
                    upload.render({
                        elem: '#tupload' //绑定元素
                        , url: 'upload' //上传接口
                        , done: function (res) {
                            setTimeout(function () {
                                _this._url = res.img;
                                _this.bitem.img=_this._url;
                                _this.flag = true;
                            },5000);

                        }
                        , error: function () {
                            alert("上传失败");
                        }
                    });
                },
                budinginfo: function (id) {
                    this.idFlag=true;
                    this.delFlag=true;
                    this.upflag=false;
                    this.resetFlag=false;
                    this.flag=false;//缩略图显示
                    this.submit="修改信息";
                    var _this=this;
                    var _layer=layer;
                    axios('getBudingById?id='+id)
                        .then(function (value) {
                            _this.bitem=value.data;
                            _layer.open({
                                type: 1,
                                title: "查看信息",
                                content: $('#postBuding')
                            });
                        }).catch(function (reason) {
                            _layer.alert("数据异常");
                            console.log(reason);
                    })

                },
                roominfo:function (budingId) {
                    location.href="../room/toRoomView?budingId="+budingId;
                }
            },
            created: function () {
                var _this = this;
                var _laypage = laypage;
                axios.get('getCount')
                    .then(function (value) {
                        _laypage.render({
                            elem: "page",
                            count: value.data,
                            limit: 11,
                            theme: "#1E9FFF",
                            layout: ['count', 'prev', 'page', 'next'],
                            jump: function (obj, frist) {
                                var v = _this;
                                var index = obj.curr;
                                var size = obj.limit;
                                axios.get('getBudingByPage', {
                                    params: {
                                        "index": index,
                                        "size": size
                                    }
                                })
                                    .then(function (value1) {
                                        v.budings = value1.data;
                                    })
                            }
                        });
                    }).catch(function (reason) {
                    console.log(reason);
                })
            }

        });

    });



</script>
</html>
